<script type="text/javascript">
	$(document).ready(function(){ 
		$("#uname_conf_cor").hide();
		$("#uname_conf_err").hide();
		$("#email_conf_cor").hide();
		$("#email_conf_err").hide(); 
		$("#pword_con_err").hide();
		$("#pword_err").hide();
		$("#rname_err").hide(); 
		$("#email_con_err").hide();
		$("#email_err").hide();
		$("#uname_err").hide();
		$("#overall_err").hide();
		
		$("#uname").change(function(){
				
				$.get('ajax/registration/uname_check.php?type=username&q='+$(this).val(), function(data){
				
					if(data=="yes"){
						$("#uname_conf_cor").slideUp();
						$("#uname_conf_err").slideDown();
					} else {
						$("#uname_conf_cor").slideDown();
						$("#uname_conf_err").slideUp();
					}
				});
										 
			});
		
		$("#email").change(function(){
				
				$.get('ajax/registration/uname_check.php?type=email&q='+$(this).val(), function(data){
				
					if(data=="yes"){
						$("#email_conf_cor").slideUp();
						$("#email_conf_err").slideDown();
					} else {
						$("#email_conf_cor").slideDown();
						$("#email_conf_err").slideUp();
					}
				});
										 
			});
		
		$("#register").click(function(){
			$("#reg-loading").show();						  
			$("input").attr("disabled","disabled");
			var error = false;
			if($("#pword").val()!=$("#pword_con").val() || $("#pword").val()==""){
				error = true;	
				$("#pword_con_err").slideDown();
				$("#pword_err").slideDown();
			} else {
				$("#pword_con_err").slideUp();
				$("#pword_err").slideUp();
			}
			
			if($("#email").val()!=$("#email_con").val() || $("#email").val()==""){
				error = true;	
				$("#email_con_err").slideDown();
				$("#email_err").slideDown();
			} else {
				$("#email_con_err").slideUp();
				$("#email_err").slideUp();
			}
	
			if($("#rname").val()==""){
				error = true;	
				$("#rname_err").slideDown();
			} else {
				$("#rname_err").slideUp();
			}
	
			if($("#uname").val()==""){
				error = true;	
				$("#uname_err").slideDown();
			} else {
				$("#uname_err").slideUp();
			}
			
			if(error){
				$("input").attr("disabled","");
				$("#overall_err").sildeDown();
				$("#reg-loading").hide();						  
			} else {
				$("#overall_err").hide();
				$.post('ajax/registration/validate.php', { 	uname: $("#uname").val(),
															uname_clean: $("#uname").val().toLowerCase(),
															rname: $("#rname").val(),
															email: $("#email").val(),
															email_con: $("#email_con").val(),
															pword: $("#pword").val(),
															pword_con: $("#pword_con").val() }, function(data){
		
					if(data!="ok"){
						//alert(data);
						$("#overall_err").slideDown();	
						$("#innertext").html(data);
						$("input").attr("disabled","");
						$("#reg-loading").hide();
					} else {
						$("#overall_err").slideDown();
						$("#innertext").html("Success! Please check you emails for confirmation.");	
						$("#reg-loading").hide();
					}
									
				});
			}
			
		});
	});
</script>
<h2>registration</h2>
<p>
<form action="#reg" method="post">
		<div id="overall_err">
            <div class="ui-widget"> 
                <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> 
                    <p><span id="innertext"></span></p> 
                </div> 
            </div> 
         </div>
   	<table id="reg_table" width="100%" cellspacing="0" cellpadding="0">
      <tr>
        <td width="25%"><strong>username:</strong></td>
        <td width="25%"><input name="uname" type="text" id="uname">
    </td>
            <td width="50%">
           <div id="uname_conf_cor" class="reg_cor">
                <strong>Yay!</strong> Username available!
          </div>
      <div id="uname_conf_err" class="reg_err">
           	  	<strong>Oh noes!</strong> Username already taken!</p> 
          </div>
          <div id="uname_err" class="reg_err">
           	  	<strong>Oh noes!</strong> Username is required!</p> 
          </div>
           </td>
      </tr>
      <tr>
        <td><strong>real name:</strong></td>
        <td><input name="rname" type="text" id="rname"></td>
        <td><div id="rname_err" class="reg_err">
           	  	<strong>Oh noes!</strong> Real name is required!</p> 
          </div></td>
      </tr>
      <tr>
        <td><strong>email:</strong></td>
        <td><input name="email" type="text" id="email"></td>
        <td>
              <div id="email_conf_cor" class="reg_cor">
                    <strong>Yay!</strong> Email available!
              </div>
              <div id="email_conf_err" class="reg_err">
                    <strong>Oh noes!</strong> Email already taken!</p> 
              </div>
              <div id="email_err" class="reg_err">
           	  	<strong>Oh noes!</strong> Email addresses do not match or are empty!</p> 
          	</div>
        </td>
      </tr>
      <tr>
        <td><strong>confirm email:</strong></td>
        <td><input name="emailcon" type="text" id="email_con"></td>
        <td><div id="email_con_err" class="reg_err">
           	  	<strong>Oh noes!</strong> Email addresses do not match or are empty!</p> 
        </div></td>
      </tr>
      <tr>
        <td><strong>password:</strong></td>
        <td><input name="pword" type="password" id="pword"></td>
        <td><div id="pword_err" class="reg_err">
           	  	<strong>Oh noes!</strong> Passwords do not match or are empty!</p> 
        </div></td>
      </tr>
      <tr>
        <td><strong>confirm password:</strong></td>
        <td><input name="pwordcon" type="password" id="pword_con"></td>
        <td><div id="pword_con_err" class="reg_err">
           	  	<strong>Oh noes!</strong> Passwords do not match or are empty!</p> 
        </div></td>
      </tr>
      <tr>
        <td id="no_border"><input id="register" name="register" type="button" value="register!" style="float:left;"><div id="reg-loading" class="loading-small"></div></td>
        <td id="no_border">&nbsp;</td>
            <td id="no_border">&nbsp;</td>
      </tr>
    </table>

    
  </form>
</p>
